<template>
  <header class="header">
    <div class="container">
      <h1 class="header-logo">
        <router-link :to="`/${lang}`">
          <slot>
            <img
              src="../assets/img/logo.svg"
              alt="robert-logo"
              class="header-logo--default"
            />
          </slot>
        </router-link>
      </h1>
      <ul class="header-nav">
        <li class="header-nav__item" v-for="(item, id) of langConfig" :key="id">
          <router-link active-class="active" :to="`/${lang}/${item.url}`">{{
            item.name
          }}</router-link>
        </li>
      </ul>
    </div>
  </header>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import compoLang from '../router/component.json'

@Component
export default class Header extends Vue {
  langs: Object = {
    'zh-CN': '中文',
    'en-US': 'English',
    es: 'Español',
    'fr-FR': 'Français'
  }
  get lang(): string {
    return this.$route.path.split('/')[1] || 'zh-CN'
  }
  get displayedLang(): string {
    return this.langs[this.lang] || '中文'
  }
  get langConfig(): string {
    const compoLang_s: any = compoLang
    return compoLang_s.filter((config: any) => {
      return config.lang === this.lang
    })[0]['header']
  }
}
</script>

<style lang="scss">
.header {
  height: 80px;
  background-color: #fff;
  color: #fff;
  top: 0;
  left: 0;
  width: 100%;
  line-height: 80px;
  z-index: 100;
  position: fixed;
  .container {
    height: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid #dcdfe6;
    .header-logo {
      margin: 0;
      float: left;
      font-size: 32px;
      font-weight: normal;
      .header-logo--default {
        vertical-align: sub;
      }
    }
    .header-nav {
      float: right;
      height: 100%;
      line-height: 80px;
      background: transparent;
      padding: 0;
      margin: 0;
      &::before,
      &::after {
        display: table;
        content: '';
      }
      &::after {
        clear: both;
      }

      .header-nav__item {
        margin: 0;
        float: left;
        list-style: none;
        position: relative;
        cursor: pointer;
        a {
          text-decoration: none;
          color: #1989fa;
          opacity: 0.5;
          display: block;
          padding: 0 22px;

          &.active,
          &:hover {
            opacity: 1;
          }

          &.active::after {
            content: '';
            display: inline-block;
            position: absolute;
            bottom: 0;
            left: calc(50% - 15px);
            width: 30px;
            height: 2px;
            background: #409eff;
          }
        }
      }
    }
  }
}
</style>
